<template>
  <div class="w-full min-h-full bg-gray-200 relative">
    <div class="w-40 min-h-full absolute left-0 top-0 bottom-0 flex flex-col justify-start items-center divide-y-2 ">
      <span class="select-none w-full p-2">{{ selfemail }}</span>
      <div v-for="(item,index) in emailmenulist" :key="item.name" @click="dianji(index)"
           class="dianji p-2 w-full text-xl hover:bg-blue-200" :class="[activeIndex===index?'bg-blue-200':'']">
        {{ item.name }}
      </div>
    </div>
    <div class="w-40 min-h-full absolute left-40 top-0 bottom-0 bg-red-200 flex flex-col justify-start items-center">
      <n-input v-model:value="searchtext" type="text" placeholder="在当前邮箱中搜索" @keydown.enter.prevent="searchfunc"/>
      <div v-if="jintian.length > 0">
        <h1 class="w-full h-5 bg-gray-300 text-blue-500 text-left">今天的邮件</h1>
        <div v-for="item1 in jintian" class="w-full h-10 juzhong">
          <span>item.title</span>
        </div>
      </div>
      <div v-if="zuotian.length > 0">
        <h1 class="w-full h-5 bg-gray-300 text-blue-500 text-left">昨天的邮件</h1>
        <div v-for="item1 in zuotian" class="w-full h-10 juzhong">
          <span>item.title</span>
        </div>
      </div>
      <div v-if="qiantian.length > 0">
        <h1 class="w-full h-5 bg-gray-300 text-blue-500 text-left">前天的邮件</h1>
        <div v-for="item1 in qiantian" class="w-full h-10 juzhong">
          <span>item.title</span>
        </div>
      </div>
      <div v-if="benzhou.length > 0">
        <h1 class="w-full h-5 bg-gray-300 text-blue-500 text-left">本周的邮件</h1>
        <div v-for="item1 in benzhou" class="w-full h-10 juzhong">
          <span>item.title</span>
        </div>
      </div>
      <div v-if="shangzhou.length > 0">
        <h1 class="w-full h-5 bg-gray-300 text-blue-500 text-left">上周的邮件</h1>
        <div v-for="item1 in shangzhou" class="w-full h-10 juzhong">
          <span>item.title</span>
        </div>
      </div>
      <div v-if="gengzao.length > 0">
        <h1 class="w-full h-5 bg-gray-300 text-blue-500 text-left">更早的邮件</h1>
        <div v-for="item1 in gengzao" class="w-full h-10 juzhong">
          <span>item.title</span>
        </div>
      </div>
    </div>
    <div class="absolute left-80 top-0 bottom-0 right-0 bg-blue-200"></div>
  </div>
</template>

<script>
import {computed, defineComponent, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {NInput} from "naive-ui"

export default defineComponent({
  name: "email",
  setup(prop, content) {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    // 当前用户的邮箱地址
    const selfemail = ref("444812154@qq.com")
    // 当前点击的按钮序号
    const activeIndex = ref(0)
    // 菜单列表
    const emailmenulist = ref([
      {name: "所有邮件", pathName: ""},
      {name: "收件箱", pathName: ""},
      {name: "草稿箱", pathName: ""},
      {name: "已发送邮件", pathName: ""},
      {name: "已删除邮件", pathName: ""},
      {name: "垃圾邮件", pathName: ""},
      {name: "收藏邮件", pathName: ""},
      {name: "待办邮件", pathName: ""},
    ])
    // 点击菜单
    const dianji = (index) => {
      activeIndex.value = index
    }
    // 搜索的文本内容
    const searchtext = ref("")
    // 按下回车进行搜索
    const searchfunc = () => {
      console.log("按下回车进行搜索")
    }
    // 邮件列表
    const list = ref([])
    const jintian = ref([]) // 今天的邮件
    const zuotian = ref([]) // 昨天的邮件
    const qiantian = ref([])// 前天的邮件
    const benzhou = ref([]) // 本周的邮件
    const shangzhou = ref([]) // 上周的邮件
    const gengzao = ref([])   // 更早的邮件
    // 暂存一下今天的日期
    const nowdate = ref("")
    // 获取今天的日期
    const getdate = () => {
      const Nowdate = new Date();
      // Nowdate.getFullYear();    //获取完整的年份(4位,1970-????)
      // Nowdate.getMonth();       //获取当前月份(0-11,0代表1月)
      // Nowdate.getDate();        //获取当前日(1-31)
      return `${Nowdate.getFullYear()}-${Nowdate.getMonth() - 1}-${Nowdate.getDate()}`
    }
    // 获取今天是本年度的第几周
    const getweekindex = (xianzai) => {
      const kaishi = new Date(xianzai.valueOf())
      kaishi.setMonth(0)
      kaishi.setDate(1)
      let chazhi = xianzai - kaishi
      let days = Math.ceil(chazhi / (24 * 60 * 60 * 1000));
      let num = Math.ceil(days / 7);
      return num
    }
    // 分发邮件
    const fenfalist = () => {
      // 分发之前，将今天的时间记录下来，每次分发的时候，对比一下日期，如果日期变了，需要重新分发
      const jintiandate = getdate()
      if (jintiandate !== nowdate.value) {
        // 如果日期变了，将所有数据回收，重新进行分发
        list.value = [...jintian.value, ...zuotian.value, ...qiantian.value, ...benzhou.value, ...shangzhou.value, ...gengzao.value, ...list.value]
        jintian.value = []
        zuotian.value = []
        qiantian.value = []
        benzhou.value = []
        shangzhou.value = []
        gengzao.value = []
        nowdate.value = jintiandate
      }
      // 定义时间节点
      const nowTime2 = new Date()
      const start = new Date(nowTime2.toLocaleDateString()).getTime();
      const end = new Date(nowTime2.toLocaleDateString()).getTime() + 24 * 60 * 60 - 1;
      // 获取今天是本年度的第几周
      const weekindex = getweekindex(nowTime2)
      const jintiantime = {start: start, end: end}
      const zuotiantime = {start: start - 24 * 60 * 60, end: end - 24 * 60 * 60}
      const qiantiantime = {start: start - 24 * 60 * 60 * 2, end: end - 24 * 60 * 60 * 2}
      const benzhoutime = weekindex
      const shangzhoutime = weekindex - 1
      list.value.forEach(item => {
        if (item.createTime > jintiantime.start && item.createTime < jintiantime.end) {
          jintian.value.push(item)
        } else if (item.createTime > zuotiantime.start && item.createTime < zuotiantime.end) {
          zuotian.value.push(item)
        } else if (item.createTime > qiantiantime.start && item.createTime < qiantiantime.end) {
          qiantian.value.push(item)
        } else if (benzhoutime === getweekindex(item.createTime)) {
          benzhou.value.push(item)
        } else if (shangzhoutime === getweekindex(item.createTime)) {
          shangzhou.value.push(item)
        } else {
          gengzao.value.push(item)
        }
        list.value = []
      })
    }
    return {
      selfemail,
      activeIndex,
      emailmenulist,
      dianji,
      searchtext,
      searchfunc,
      jintian,
      zuotian,
      qiantian,
      benzhou,
      shangzhou,
      gengzao,
    }
  },
  components: {NInput,},
})


// 初始化区域
</script>

<style scoped>

</style>